<!--  EL-容器组件-->
<template>
  <div class="common-layout">
    <el-container>
<!--  侧边栏：可以自定义宽度-->
      <el-aside width="200px">
        <el-menu>
          <el-menu-item index="1">用户管理</el-menu-item>
          <el-menu-item index="2">车辆管理</el-menu-item>
          <el-menu-item index="3">围栏管理</el-menu-item>
        </el-menu>
      </el-aside>
<!-- 右侧主体内容   -->
      <el-container>
        <el-header>
          <h1 style="background-color: #62b5ec;margin: 10px;">智慧车辆运营系统-IVOS</h1>
        </el-header>

        <el-main>
          <el-table :data="arr" style="margin: 0 auto">
            <el-table-column type="selection"  align="center" width="80"></el-table-column>
            <el-table-column type="index" label="编号" align="center" width="80"></el-table-column>
            <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
            <el-table-column prop="model" label="型号" align="center"></el-table-column>
            <el-table-column prop="license" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="color" label="颜色" align="center"></el-table-column>
            <el-table-column prop="km" label="行驶里程" align="center"></el-table-column>

            <!-- 自定义列模版   -->
            <el-table-column label="操作" align="center">
              <!--scope保存了当前行数据的索引$index(从0开始)与当前行的完整数据row -->
              <template #default="scope">
                <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>




<script setup>
import {ref} from "vue";

const arr = ref([
  {brand:'宝马',model:'x5',license:'京A88888',color:'白色',km:1000},
  {brand:'奔驰',model:'c级',license:'京A55555',color:'黑色',km:2000},
  {brand:'奥迪',model:'A6',license:'京A66666',color:'黑色',km:3000},
]);

const del = (i,emp)=>{
  if (confirm('你确认要删除'+emp.name+'吗？')){
    arr.value.splice(i,1);
  }
}


</script>

<style scoped>

</style>